<template>
  <el-dialog title="" v-model="outerVisible" class="el-dialog" width="850px" :before-close="handleClose">
    <h2 style="padding: 10px 262px">客户开发计划-计划项数据开发</h2>
    <div class="SaleChange-max">
      <div class="SaleChange-1">
        <span>客户名称</span>
        <el-input v-model="saleChange.customerName" :disabled="true" style="width: 250px"></el-input>
      </div>
      <div class="SaleChange-1">
        <span>机会来源</span>
        <el-input v-model="saleChange.chanceSource" :disabled="true" style="width: 250px"></el-input>
      </div>
      <div class="SaleChange-1">
        <span>联系人</span>
        <el-input v-model="saleChange.linkMan" :disabled="true" style="width: 250px"></el-input>
      </div>
      <div class="SaleChange-1">
        <span>联系电话</span>
        <el-input v-model="saleChange.linkPhone" :disabled="true" style="width: 250px"></el-input>
      </div>
      <div class="SaleChange-1">
        <span>概要</span>
        <el-input v-model="saleChange.overview" :disabled="true" style="width: 250px"></el-input>
      </div>
      <div class="SaleChange-1">
        <span>成功几率</span>
        <el-input v-model="saleChange.cgjl" :disabled="true" style="width: 250px"></el-input>
      </div>
    </div>
    <!--  客户开发计划表  -->
    <div class="client">
      <el-button type="primary" style="margin: 15px" @click="innerVisible = true">
        <el-icon size="20px">
          <moon-night />
        </el-icon>
        <span style="margin: 10px">添加计划项</span>
      </el-button>
      <el-button type="success" style="margin: 15px" @click="succeed">
        <el-icon size="20px">
          <promotion />
        </el-icon>
        <span style="margin: 10px">开发成功</span>
      </el-button>
      <el-button type="danger" style="margin: 15px" @click="fail">
        <el-icon size="20px">
          <document-delete />
        </el-icon>
        <span style="margin: 10px">开发失败</span>
      </el-button>
      <div class="CusDevPlan">
        <el-table :data="cus_dev_plan" border style="width: 100%; opacity: 0.7;" :header-cell-style="{textAlign: 'center'}"
                  :cell-style="{ textAlign: 'center' }">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column fixed label="编号" prop="id" width="100"></el-table-column>
          <el-table-column label="计划项内容" prop="planItem" width="140"></el-table-column>
          <el-table-column label="计划日期" prop="planDate" width="170"></el-table-column>
          <el-table-column label="执行效果" prop="exeAffect" width="120">
            <template #default="s">
              <template v-if="s.row.exeAffect==='执行成功'">
                <el-tag type="success">执行成功</el-tag>
              </template>
              <template v-else>
                <el-tag type="danger">执行失败</el-tag>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="修改时间" prop="updateDate" width="170"></el-table-column>
          <el-table-column fixed="right" label="操作" width="160">
            <template #default="xxx">
              <!--执行成功-->
              <el-button type="primary" :icon="Check" circle @click="execute(xxx.row)"></el-button>
              <!--执行失败-->
              <el-button type="danger" :icon="Close" circle @click="executeFail(xxx.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页控件 -->
        <el-pagination background layout="total, prev, pager, next, jumper" :current-page="no" :page-size="size"
                       :total="total" @current-change="currentChange">
        </el-pagination>
      </div>
    </div>

    <!--添加计划项-->
    <el-dialog width="27%" title="计划项管理-添加计划项" v-model="innerVisible" destroy-on-close :before-close="handleClose">
      <div class="CusDevPlan-1">
        <div class="CusDevPlan-2">
          <span>计划内容</span>
          <el-input placeholder="请输入计划内容" v-model="devPlan.planItem" style="width: 250px"></el-input>
        </div>
        <div class="CusDevPlan-2">
          <span>计划日期</span>
          <el-date-picker v-model="devPlan.planDate"
                          value-format="YYYY-MM-DD"
                          type="date" placeholder="请输入计划日期" style="width: 250px"/>
        </div>
        <el-button type="success" style="width: 82px;height: 44px;margin-left: 100px;margin-top: 10px" @click="addPlan">确定添加</el-button>
        <el-button type="primary" style="width: 82px;height: 44px;margin-top: 10px" @click="innerVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { h } from 'vue'
import {getMarPlanPageInfo, addPlan, succeedSaleChance,failSaleChance,execute,executeFail} from "../../../../network/marclient";
import {Delete,Edit,Close,Check} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";

export default {
  name: "ClientForm",
  emits:['refresh-data'],
  setup(){
    return{
      Edit,
      Delete,
      Close,
      Check
    }
  },
  data() {
    return {
      outerVisible: false,
      innerVisible: false,
      saleChange:{
        id: null,
        customerName: null, //客户名称
        chanceSource: null, //机会来源
        linkMan: null, //联系人
        linkPhone: null, //联系电话
        overview: null, //概要
        cgjl: null, //成功几率(%)
      },
      devPlan:{
        id: null,
        planItem: null,
        planDate: null,
        exeAffect: null,
      },
      cus_dev_plan:[],
      no: 1,
      size: 3,
      total: 0,
    }
  },
  methods:{
    //关闭前的回调
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(() => {
            done()
          })
          .catch(() => {})
    },
    //刷新
    refreshData(){
      this.loadData();
    },
    //开发成功
    succeed() {
      this.$confirm('此操作将开发成功, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
      }).then(() => {
        succeedSaleChance(this.saleChange.id).then(data => {
          this.$emit('refresh-data');
        });
        this.$message({
          type: 'success',
          message: '开发成功!',
        });
        //刷新页面
        this.outerVisible = false;
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消',
        })
      })
    },
    //开发失败
    fail(){
      this.$confirm('此操作将开发失败, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
      }).then(() => {
        failSaleChance(this.saleChange.id).then(data=>{
          this.$emit('refresh-data');
        })
        this.$message({
          type: 'success',
          message: '开发失败!',
        });
        //刷新页面
        this.outerVisible = false;
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消',
        })
      })
    },
    //执行成功
    execute(row) {
      this.$msgbox({
        title: '执行操作',
        message: h('p', null, "此操作将执行成功，确定执行吗？"),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '执行中...'
            setTimeout(() => {
              done()
              setTimeout(() => {
                instance.confirmButtonLoading = false
              }, 300)
            }, 3000)
          } else {
            done()
          }
        },
      }).then(() => {
        execute(row.id).then(data => {
          this.loadData();
        });
        this.$message({
          type: 'success',
          message: '执行成功！！！'
        })
      })
    },
    //执行失败
    executeFail(row) {
      this.$msgbox({
        title: '执行操作',
        message: h('p', null, "此操作将执行成功，确定执行吗？"),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '执行中...'
            setTimeout(() => {
              done()
              setTimeout(() => {
                instance.confirmButtonLoading = false
              }, 300)
            }, 3000)
          } else {
            done()
          }
        },
      }).then(() => {
        executeFail(row.id).then(data => {
          this.loadData();
        });
        this.$message({
          type: 'success',
          message: '执行成功！！！'
        })
      })
    },
    //添加计划项
    addPlan(){
      addPlan(this.devPlan).then(data=>{
        if (data.code===200){
          ElMessage.success('添加成功！！！');
          this.innerVisible = false;
          this.loadData();
          Object.assign(this.devPlan,this.$options.data.call(this).devPlan);
        }
      })
    },
    //查询所有
    loadData() {
      let params = {
        pageNum: this.no,
        pageSize: this.size,
      }
      getMarPlanPageInfo(params).then(data => {
        console.log('data:', data)
        this.cus_dev_plan = data.list;
        this.total = data.total;
      })
    },
    //分页
    init() {
      this.loadData();
    },
    currentChange(n) {
      this.no = n;
      this.loadData();
    }
  },
  /* 钩子函数 */
  created() {
    this.init();
  }
}
</script>

<style scoped>
.SaleChange-max{
  width: 800px;
  height: 160px;
  border: 0px solid black;
  margin: 10px;
  background-color: rgba(255, 0, 0, 0);
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  border-radius: 20px;
}
.SaleChange-1{
  width: 350px;
  border: 0px solid black;
  margin-top: 15px;
  margin-left: 30px;
  text-align: right;
  float: left;
}
.SaleChange-1 span{
  padding: 0 15px;
}
.client{
  width: 800px;
  border: 0px solid black;
  margin: 20px 10px;
  background-color: rgba(255, 0, 0, 0);
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  border-radius: 20px;
}
.CusDevPlan{
  width: 800px;
  border: 0px solid black;
}
.CusDevPlan-1{
  width: 390px;
  height: 200px;
  border: 0px solid black;
  background-color: rgba(255, 0, 0, 0);
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  border-radius: 20px;
  margin-left: 8px;
}
.CusDevPlan-2{
  width: 350px;
  border: 0px solid black;
  padding:15px 10px;
  text-align: right;
}
.CusDevPlan-2 span{
  padding: 0 15px;
}
</style>